/**
 * Created by lx on 2017/4/20.
 */
'use strict';
require('styles/page.css');
import React from 'react';

// 页面需要的Component
import XS8 from '../components/Layout/XS8';

class CreatePage extends React.Component {

  constructor(props) {
    super(props);
    this.selectIndex = null;
    this.flag = true;
    this.loadCss = '<div id="spinner" class="spinner"><div class="rect1"></div><div class="rect2"></div><div class="rect3">' +
      '</div><div class="rect4"></div><div class="rect5"></div></div>';
  }

  render() {
    let {
      state
    } = this.props;

    if (state.createPageLI.length != 0) {
      // 调用插入LI的函数
      if (state.createPageLI.close == true) {
        // 清除html
        if (this.flag == false) {
          for (let i = 0; i < state.createPageLI.length; i++) {
            document.getElementById(this.selectIndex).removeChild(document.getElementById("itemId" + state.createPageLI[i].itemId));
          }
          this.flag = true;
        }
        this.selectIndex = null;
      } else {
        // 插入
        if (state.createPageLI.close == false) {
          let temp = "";
          for (let i = 0; i < state.createPageLI.length; i++) {
            temp += "<li id='itemId" + state.createPageLI[i].itemId + "'>" + state.createPageLI[i].itemName + "</li>";
          }
          const index = this.selectIndex;
          document.getElementById(index).innerHTML += this.loadCss;
          setTimeout(function () {
            document.getElementById(index).removeChild(document.getElementById("spinner"));
            document.getElementById(index).innerHTML += temp;
          }, 2000);
        } else {
          let temp = "";
          for (let i = 0; i < state.createPageLI.length; i++) {
            temp += "<li id='itemId" + state.createPageLI[i].itemId + "'>" + state.createPageLI[i].itemName + "</li>";
          }
          // setTimeout赋值
          const index = this.selectIndex;
          document.getElementById(index).innerHTML += this.loadCss;
          setTimeout(function () {
            document.getElementById(index).removeChild(document.getElementById("spinner"));
            document.getElementById(index).innerHTML += temp;
          }, 2000);
        }
        this.flag = false;
      }
    }

    return (
      <div className="container-fluid" style={{fontSize: '16px'}}>
        <div className="row">
          <div className="col-md-4 ulProd">
            {state.CreatePage.map((child, i) => <div>
              <ul className="myButton"
                  id={"categoryId" + child.categoryId}
                  name={"categoryName" + child.categoryName} onClick={(e)=> {
                this.getSubListClick(e)
              }}>{child.categoryDescription}</ul>
            </div>)}
          </div>
          <XS8/>
        </div>
      </div>
    )
  }

  getSubListClick(e) {
    // 通过e可以知道点击的是哪个ul
    if (this.selectIndex == e.target.id) {
      let {getSubListClick} = this.props.CreatePageAction;
      getSubListClick('关闭');
    } else {
      let {
        state
      } = this.props;
      // 加一个判断:如果已经关过了就不关了
      if (this.flag == false) {
        for (let i = 0; i < state.createPageLI.length; i++) {
          document.getElementById(this.selectIndex).removeChild(document.getElementById("itemId" + state.createPageLI[i].itemId));
        }
        this.flag = true;
      }
      this.selectIndex = e.target.id;
      let {getSubListClick} = this.props.CreatePageAction;
      getSubListClick(e.target.id);
    }
  }
}

export default CreatePage
